<template>
  <el-card class="node-field-map-editor" shadow="hover">
    <template #header>
      <div class="card-header">
        <span class="text-lg font-semibold">自定义节点提示词配置</span>
      </div>
    </template>

    <el-space direction="vertical" size="large" class="mt-4">
      <!-- 表头 -->
      <el-row :gutter="20" class="font-medium text-gray-700">
        <el-col :span="10">节点类型（class_type）</el-col>
        <el-col :span="10">提示词字段名（inputs中的字段）</el-col>
        <el-col :span="4"></el-col>
      </el-row>

      <!-- 表体（动态行） -->
      <el-space direction="vertical" size="default" :style="{ width: '100%' }">
        <el-row 
          :gutter="20" 
          v-for="(row, index) in rows" 
          :key="index" 
          class="align-items-center"
        >
          <el-col :span="10">
            <el-input
              v-model="row.nodeType"
              placeholder="例如：CustomPromptNode"
              size="default"
              clearable
            />
          </el-col>
          <el-col :span="10">
            <el-input
              v-model="row.fieldName"
              placeholder="例如：prompt_content"
              size="default"
              clearable
            />
          </el-col>
          <el-col :span="4" class="text-right">
            <el-button
              type="text"
              icon="Delete"
              text-color="#ff4d4f"
              @click="removeRow(index)"
              :disabled="rows.length <= 1"
              :class="{ 'opacity-50': rows.length <= 1 }"
            >
              删除
            </el-button>
          </el-col>
        </el-row>
      </el-space>

      <!-- 操作按钮 -->
      <div style="display: flex;gap:10px">
          <el-button
            type="primary"
            icon="Plus"
            size="default"
            @click="addRow"
            :plain="true"
          >
            添加节点配置
          </el-button>
          <el-button
            type="success"
            icon="Check"
            size="default"
            @click="handleSubmit"
            :plain="true"
          >
            应用配置
          </el-button>
      </div>
    </el-space>
  </el-card>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue';

// 定义节点字段映射类型
interface NodeFieldMap {
  [nodeType: string]: string;
}

// 接收父组件传入的初始配置
const props = defineProps<{
  modelValue?: NodeFieldMap; // 支持v-model双向绑定
}>();

// 向父组件传递更新后的配置
const emit = defineEmits<{
  (e: 'update:modelValue', value: NodeFieldMap): void;
  (e: 'submit', value: NodeFieldMap): void;
}>();

// 确保rows初始化为数组
const rows = ref<Array<{ nodeType: string; fieldName: string }>>(() => {
  if (!props.modelValue || typeof props.modelValue !== 'object') {
    return [{ nodeType: '', fieldName: '' }];
  }
  
  const initialRows = Object.entries(props.modelValue).map(([nodeType, fieldName]) => ({
    nodeType,
    fieldName
  }));
  
  return initialRows.length > 0 ? initialRows : [{ nodeType: '', fieldName: '' }];
});

// 添加一行
const addRow = () => {
  if (Array.isArray(rows.value)) {
    rows.value.push({ nodeType: '', fieldName: '' });
  } else {
    rows.value = [{ nodeType: '', fieldName: '' }];
  }
};

// 删除一行
const removeRow = (index: number) => {
  if (rows.value.length <= 1) return;
  rows.value.splice(index, 1);
};

// 转换为对象并提交
const handleSubmit = () => {
  const map: NodeFieldMap = {};
  rows.value.forEach(({ nodeType, fieldName }) => {
    const trimmedType = nodeType.trim();
    const trimmedField = fieldName.trim();
    if (trimmedType && trimmedField) {
      map[trimmedType] = trimmedField;
    }
  });
  emit('update:modelValue', map);
  emit('submit', map);
};
</script>

<style scoped>
.node-field-map-editor {
  max-width: 900px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.align-items-center {
  display: flex;
  align-items: center;
}

/* 禁用状态样式 */
:deep(.el-button.is-disabled) {
  cursor: not-allowed;
}
</style>
